<template>
	<view class="home-container">
		<view>
					<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @input="input" @cancel="cancel" @change="change" @clear="clear">
					</uni-search-bar>
					当前搜索影片是：{{ searchValue }}
				</view>
		<!-- 头部 -->
		<view class="nav-bar">
			<view class="left-icon">
				<text>汕头</text>
				<i class="iconfont icon-wxbdingwei"></i>
			</view>
			<view class="enter-tabs">
				<liuyuno-tabs :tabData="tabs" :activeIndex="activeIndex" @tabClick='tabClick' />
			</view>
			<view class="right-icon">
				<i class="iconfont icon-xiazai"></i>
			</view>
		</view>
		
		<!-- 列表 -->
		<block v-if="activeIndex === 0">
			<scroll-view scroll-y="true" :style="{height:windowHeight +'px'}">
				<block v-for="item in movieList" :key="item.id">
					<movie :movieData="item"></movie>
				</block>
			</scroll-view>
		</block>
		<block v-else-if="activeIndex === 1">
			<scroll-view scroll-y="true" :style="{height:windowHeight +'px'}">
				<view class="expected-warp">
					<view class="expected-title">
						近期最受期待
					</view>
					<scroll-view scroll-x="true" style="width: 100%;" class="scroll-warp">
						<view class="expected-item">
							<image src="../../static/test/test.jpg" class="exImg"></image>
							<view class="expected-nm">
								蜘蛛侠之明德影院系列1
							</view>
							<view class="expected-time">
								2月1日
							</view>
						</view>
						<view class="expected-item">
							<image src="../../static/test/test.jpg" mode="" class="exImg"></image>
							<view class="expected-nm">
								蜘蛛侠之明德影院系列1
							</view>
							<view class="expected-time">
								2月1日
							</view>
						</view>
						<view class="expected-item">
							<image src="../../static/test/test.jpg" mode="" class="exImg"></image>
							<view class="expected-nm">
								蜘蛛侠之明德影院系列1
							</view>
							<view class="expected-time">
								2月1日
							</view>
						</view>
						<view class="expected-item">
							<image src="../../static/test/test.jpg" mode="" class="exImg"></image>
							<view class="expected-nm">
								蜘蛛侠之明德影院系列1
							</view>
							<view class="expected-time">
								2月1日
							</view>
						</view>
						<view class="expected-item">
							<image src="../../static/test/test.jpg" mode="" class="exImg"></image>
							<view class="expected-nm">
								蜘蛛侠之明德影院系列1
							</view>
							<view class="expected-time">
								2月1日
							</view>
						</view>
						<view class="expected-item">
							<image src="../../static/test/test.jpg" mode="" class="exImg"></image>
							<view class="expected-nm">
								蜘蛛侠之明德影院系列1
							
							</view>
							<view class="expected-time">
								2月1日
							</view>
						</view>
						<view class="expected-item">
							<image src="../../static/test/test.jpg" mode="" class="exImg"></image>
							<view class="expected-nm">
								蜘蛛侠之明德影院系列1
							</view>
							<view class="expected-time">
								2月1日
							</view>
						</view>
					</scroll-view>
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	import tabs from '../../components/liuyuno-tabs/liuyuno-tabs.vue';
	import movie from '../../components/movie-list/movie.vue';
	import {
		imgesHandler
	} from '../../util/handler.js'
	import {
		fetchMovieList
	} from '../../api/movieList.js'
	export default {
		data() {
			return {
				
				searchValue: '',
				page: 1,
				limit: 10,
				// 热映
				movieList: [],  
				page: 1,
				pagesize: 20,
				activeIndex: 0,
				windowHeight: '',
				tabs: ['热映', '待映']
			}
		},
		onLoad() {
			this._getHotMovie();
			 
		},
		onReady() {
			this.getScrollHeight()
		},
		methods: {
			tabClick(index) {
				this.activeIndex = index
			},
			async _getHotMovie() {
				let data = await fetchMovieList(this.page, this.limit)
				let result = imgesHandler(data)
				this.movieList = result
			},
			// 获取滚动高度
			getScrollHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav-bar').boundingClientRect(data => {
					uni.getSystemInfo({
						success: (res) => {
							this.windowHeight = res.windowHeight - data.height
						}
					})
				}).exec();
			},
			search(res) {
							uni.showToast({
								title: '搜索：' + res.value,
								icon: 'none'
							})
						},
						input(res) {
							console.log('----input:', res)
						},
						clear(res) {
							uni.showToast({
								title: 'clear事件，输入值为：' + res.value,
								icon: 'none'
							})
						},
						blur(res) {
							uni.showToast({
								title: 'blur事件，输入值为：' + res.value,
								icon: 'none'
							})
						},
						cancel(res) {
							uni.showToast({
								title: '点击取消，输入值为：' + res.value,
								icon: 'none'
							})
						}
		
		},
		components: {
			tabs,
			movie
		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../static/icon/maoyanIcon.css");

	.home-container {
		.nav-bar {
			height: 90upx;
			display: flex;
			align-items: center;
			padding: 0 20upx;
			border-bottom: solid #ececec 2upx;
		}

		.left-icon {
			width: 120upx;
			font-size: 32upx;
			display: flex;
			align-items: center;

			.iconfont {
				margin-left: 8upx;
			}
		}

		.enter-tabs {
			flex: 1;
		}

		.right-icon {
			width: 80upx;
			text-align: center;
		}

		.expected-warp {
			height: 380upx;
			padding: 20upx;
			.expected-title {
				font-size: 30upx;
				margin-bottom: 20upx;
				color: #333333;
			}
			.scroll-warp {
				white-space: nowrap;
			}
			.expected-item {
				height: 310upx;
				width: 170upx;
				display: inline-block;
				
				.exImg {
					width: 170upx;
					height: 230upx;
				}

				.expected-nm {
					width: 100%;
					font-size: 26upx;
					font-weight: 600;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.expected-time {
					color: #999999;
					margin-top: 4upx;
					font-size: 24upx;
				}
			}
			.expected-item:not(:first-child){
				margin-left:16upx;
			}
		}
	}
</style>
